<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播 - 组件演示</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../components/carousel/carousel.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign</h1>
            <p class="subtitle">组件演示 - 轮播</p>
        </header>

        <nav class="demo-nav">
            <a href="../index.html" class="nav-back">← 返回首页</a>
        </nav>

        <main class="main-content">
            <section class="demo-section">
                <h2>🎠 轮播演示</h2>
                
                <div class="demo-container">
                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>基础轮播</h3>
                        <div id="basicCarousel"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>带标题和描述</h3>
                        <div id="titleCarousel"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>禁用自动播放</h3>
                        <div id="manualCarousel"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>快速切换（3秒）</h3>
                        <div id="fastCarousel"></div>
                    </div>
                </div>
            </section>

            <section class="demo-section">
                <h2>使用代码</h2>
                <pre><code>// 1. 引入文件
&lt;link rel="stylesheet" href="components/carousel/carousel.css"&gt;
&lt;script src="components/carousel/carousel.js"&lt;/script&gt;

// 2. 创建容器
&lt;div id="carouselContainer"&lt;/div&gt;

// 3. 初始化轮播组件
const carousel = new Carousel({
    container: '#carouselContainer',
    items: [
        { image: 'image1.jpg', title: '标题1', description: '描述1' },
        { image: 'image2.jpg', title: '标题2', description: '描述2' },
        { image: 'image3.jpg', title: '标题3', description: '描述3' }
    ],
    autoplay: true,
    interval: 5000,
    onChange: (result) => {
        console.log('当前项:', result.current);
    }
});

// 4. 手动切换
carousel.next();
carousel.prev();

// 5. 设置当前项
carousel.setCurrent(1);</code></pre>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script src="../components/carousel/carousel.js"></script>
    <script>
        // 生成 SVG 图片
        function generateSvg(text, bgColor) {
            return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='533'%3E%3Crect width='800' height='533' fill='${bgColor.replace('#', '%23')}'/%3E%3Ctext x='50%25' y='50%25' font-size='48' fill='white' text-anchor='middle' dominant-baseline='middle' font-family='Arial'%3E${text}%3C/text%3E%3C/svg%3E`;
        }

        // 基础轮播
        new Carousel({
            container: '#basicCarousel',
            items: [
                { image: generateSvg('Image 1', '#FF6B6B') },
                { image: generateSvg('Image 2', '#4ECDC4') },
                { image: generateSvg('Image 3', '#45B7D1') },
                { image: generateSvg('Image 4', '#FFA07A') }
            ],
            autoplay: true,
            interval: 5000
        });

        // 带标题和描述
        new Carousel({
            container: '#titleCarousel',
            items: [
                { 
                    image: generateSvg('春天', '#90EE90'), 
                    title: '春天的风景', 
                    description: '美丽的春天景色' 
                },
                { 
                    image: generateSvg('夏天', '#FFD700'), 
                    title: '夏天的阳光', 
                    description: '炎热的夏日阳光' 
                },
                { 
                    image: generateSvg('秋天', '#FF8C00'), 
                    title: '秋天的落叶', 
                    description: '金黄的秋天落叶' 
                },
                { 
                    image: generateSvg('冬天', '#87CEEB'), 
                    title: '冬天的雪景', 
                    description: '洁白的冬天雪景' 
                }
            ],
            autoplay: true,
            interval: 5000
        });

        // 禁用自动播放
        new Carousel({
            container: '#manualCarousel',
            items: [
                { image: generateSvg('Manual 1', '#FF69B4') },
                { image: generateSvg('Manual 2', '#9370DB') },
                { image: generateSvg('Manual 3', '#20B2AA') }
            ],
            autoplay: false
        });

        // 快速切换
        new Carousel({
            container: '#fastCarousel',
            items: [
                { image: generateSvg('Fast 1', '#FF6347') },
                { image: generateSvg('Fast 2', '#32CD32') },
                { image: generateSvg('Fast 3', '#1E90FF') },
                { image: generateSvg('Fast 4', '#FFB6C1') },
                { image: generateSvg('Fast 5', '#00CED1') }
            ],
            autoplay: true,
            interval: 3000
        });
    </script>

    <style>
        .demo-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .demo-item {
            background: var(--bg-light);
            padding: 16px;
            border-radius: 8px;
            overflow: visible;
            position: relative;
        }

        .demo-item h3 {
            margin-top: 0;
            margin-bottom: 16px;
            font-size: 16px;
            color: var(--text-primary);
        }

        .demo-item > div {
            margin-bottom: 12px;
            overflow: visible;
        }

        @media (max-width: 768px) {
            .demo-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>
